<style>
	/* 头像显示公共 */
	.chat-img-common {
		margin-top: 45px;
		width: 50px;
		height: 50px;
		-moz-box-shadow: 0 0 5px #2c2c2c;
		-webkit-box-shadow: 0 0 5px #2c2c2c;
		box-shadow: 0 0 5px #2c2c2c;
	}

	/* 左头像 */
	.chat-img-left {
		float: left;
		content: url(http://rrhlhpja4.hn-bkt.clouddn.com/dad-avatar.png);
	}

	/* 右头像 */
	.chat-img-right {
		float: right;
		content: url(http://rrhlhpja4.hn-bkt.clouddn.com/son-avatar.png);
	}

	/* 左聊天气泡 */
	.chat-bubble-left {
		float: left;
		position: relative;
		display: block;
		margin-left: 25px;
		padding: 10px;
		width: 50%;
		height: 75px;
		border: 4px solid #2c2c2c;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		-moz-box-shadow: 0 0 5px #2c2c2c;
		-webkit-box-shadow: 0 0 5px #2c2c2c;
		box-shadow: 0 0 5px #2c2c2c;
		background-color: #2c2c2c;
		color: #fff;
	}

	/* 左聊天气泡左边的箭头 */
	.chat-bubble-left:after {
		display: block;
		position: absolute;
		left: -40px;
		bottom: 10px;
		content: " ";
		border-color: transparent #2c2c2c transparent transparent;
		border-style: solid;
		border-width: 20px;
	}

	/* 右聊天气泡 */
	.chat-bubble-right {
		float: right;
		position: relative;
		display: block;
		margin-right: 25px;
		padding: 10px;
		width: 50%;
		height: 75px;
		border: 4px solid #59b169;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		-moz-box-shadow: 0 0 5px #59b169;
		-webkit-box-shadow: 0 0 5px #59b169;
		box-shadow: 0 0 5px #59b169;
		background-color: #59b169;
		color: #000;
	}

	/* 右聊天气泡右边的箭头 */
	.chat-bubble-right:after {
		display: block;
		position: absolute;
		right: -40px;
		bottom: 10px;
		content: " ";
		border-color: transparent transparent transparent #59b169;
		border-style: solid;
		border-width: 20px;
	}

	/* 行间隔 */
	.chat-row-spacing {
		height: 20px;
		background-color: aqua;
	}
</style>


<html>
<table style="width: 100%;">
	<tr>
		<td>
			<img class="chat-img-common chat-img-left" />
			<div class="chat-bubble-left">Okay buddy, are you ready to play rock scissors paper?</div>
		</td>
	</tr>
	<tr class="chat-row-spacing">
	</tr>
	<tr>
		<td>
			<img class="chat-img-common chat-img-right" />
			<div class="chat-bubble-right">Yeah! I love playing games with you, Dad!</div>
		</td>
	</tr>
	<tr class="chat-row-spacing">
	</tr>
	<tr>
		<td>
			<img class="chat-img-common chat-img-left" />
			<div class="chat-bubble-left">Great, let's do this! Rock, paper, scissors... shoot!</div>
		</td>
	</tr>
	<tr class="chat-row-spacing">
	</tr>
	<tr>
		<td>
			<img class="chat-img-common chat-img-right" />
			<div class="chat-bubble-right">(giggles) I picked paper, Dad!</div>
		</td>
	</tr>
	<tr class="chat-row-spacing">
	</tr>
	<tr>
		<td>
			<img class="chat-img-common chat-img-left" />
			<div class="chat-bubble-left">And I picked scissors, looks like I won this round! (playfully tickles his
				son)</div>
		</td>
	</tr>
	<tr class="chat-row-spacing">
	</tr>
	<tr>
		<td>
			<img class="chat-img-common chat-img-right" />
			<div class="chat-bubble-right">(laughs) Let's play again, Dad!</div>
		</td>
	</tr>
	<tr class="chat-row-spacing">
	</tr>
	<tr>
		<td>
			<img class="chat-img-common chat-img-left" />
			<div class="chat-bubble-left">Alright, let's go! Rock, paper, scissors... shoot!</div>
		</td>
	</tr>
	<tr class="chat-row-spacing">
	</tr>
	<tr>
		<td>
			<img class="chat-img-common chat-img-right" />
			<div class="chat-bubble-right">(smiling) I picked rock this time, Dad!</div>
		</td>
	</tr>
	<tr class="chat-row-spacing">
	</tr>
	<tr>
		<td>
			<img class="chat-img-common chat-img-left" />
			<div class="chat-bubble-left">And I picked scissors again! You're getting pretty good at this, son.</div>
		</td>
	</tr>
	<tr class="chat-row-spacing">
	</tr>
	<tr>
		<td>
			<img class="chat-img-common chat-img-right" />
			<div class="chat-bubble-right">(giggles) Can we play again?</div>
		</td>
	</tr>
	<tr class="chat-row-spacing">
	</tr>
	<tr>
		<td>
			<img class="chat-img-common chat-img-left" />
			<div class="chat-bubble-left">Of course we can! Ready? Rock, paper, scissors... shoot!</div>
		</td>
	</tr>
	<tr class="chat-row-spacing">
	</tr>
	<tr>
		<td>
			<img class="chat-img-common chat-img-right" />
			<div class="chat-bubble-right">(excitedly) I picked scissors, Dad!</div>
		</td>
	</tr>
	<tr class="chat-row-spacing">
	</tr>
	<tr>
		<td>
			<img class="chat-img-common chat-img-left" />
			<div class="chat-bubble-left">And I picked rock this time. Looks like I won again, buddy. (gives his son a
				high five)</div>
		</td>
	</tr>
	<tr class="chat-row-spacing">
	</tr>
	<tr>
		<td>
			<img class="chat-img-common chat-img-right" />
			<div class="chat-bubble-right">(smiling) That was so much fun, Dad! Can we play more games together?</div>
		</td>
	</tr>
	<tr class="chat-row-spacing">
	</tr>
	<tr>
		<td>
			<img class="chat-img-common chat-img-left" />
			<div class="chat-bubble-left">Absolutely, we can play any game you want. Spending time with you is always a
				blast, kiddo. (ruffles his son's hair)</div>
		</td>
	</tr>
	<tr class="chat-row-spacing">
	</tr>
	<tr>
		<td>
			<img class="chat-img-common chat-img-right" />
			<div class="chat-bubble-right">(hugs his dad) I love you, Dad!</div>
		</td>
	</tr>
	<tr class="chat-row-spacing">
	</tr>
	<tr>
		<td>
			<img class="chat-img-common chat-img-left" />
			<div class="chat-bubble-left">(hugs his son back) I love you too, son.</div>
		</td>
	</tr>
</table>

</html>